<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }" class="m-b-5">
        <el-descriptions title="最新报名学员" direction="vertical" :column="4" border>
        </el-descriptions>
        <el-form ref="formRef" :model="formInline" label-width="100px" class="demo-ruleForm">
            <el-row :gutter="20">
                <el-col :span="14" :offset="0">
                    <el-form-item label="搜索日期:" prop="createdAt">
                        <el-radio-group v-model="formInline.createdAt">
                            <el-radio label="今天" />
                            <el-radio label="昨天" />
                            <el-radio label="本周" />
                            <el-radio label="上周" />
                            <el-radio label="本月" />
                            <el-radio label="上月" />
                            <el-radio label="近30天" />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="0">
                    <el-button type="primary" size="default" @click="handleSearch">查询</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ backgroundColor: '#f2f2f2', textAlign: 'center' }" border>
            <el-table-column type="index" label="序号" width="150" />
            <el-table-column prop="name" label="学员姓名" />
            <el-table-column prop="tel" label="联系电话" />
            <el-table-column prop="type" label="报名班型" />
            <el-table-column sortable prop="createdAt" label="报名时间">
                <template #default="scope">
                    <div>{{ scope.row.createdAt.slice(0, 10) }}</div>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="暂无新增学员" />
            </template>
        </el-table>
        <div class="pagination" v-if="tableData.length">
            <el-pagination :page-sizes="[5, 10, 20, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :default-page-size="5" />
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { StuInfoGet } from '../../../api/banner';
import { cloneDeep } from 'lodash';

// 分页总数
const total = ref<number>(0)
const Pagesize = ref<number>(5)
const formInline = reactive({
    createdAt: '',
})


// 数据包
const tableData = ref([])
let res = await StuInfoGet()
tableData.value = res.data.results
total.value = res.data.count
// 分页

// 一页显示多少条
const handleSizeChange = async (val: number) => {
    // console.log(val);
    let obj = cloneDeep(formInline)
    let res = await StuInfoGet(1, val, obj)
    tableData.value = res.data.results
    total.value = res.data.count
    Pagesize.value = val
}
// 点击分页
const handleCurrentChange = async (val: number) => {
    // console.log(val);
    let obj = cloneDeep(formInline)
    let res = await StuInfoGet(val, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}

const handleSearch = async() => {
    // 根据内容查询
    let obj = cloneDeep(formInline)
    let res = await StuInfoGet(1, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}

</script>

<style  lang="scss">
.el-descriptions__title {
    color: #666;
    padding-left: 15px;
    border-left: 4px solid #00aeff;
}
</style>